<template>
	<view class="content">
		<view v-for="item of list" class="block-view-child">
			<view class="block-view-child-item">
				<view class="label">
					订单号：
				</view>
				<view class="value">
					{{ item.number }}
				</view>
			</view>
			<view class="block-view-child-item">
				<view class="label">
					收货人：
				</view>
				<view class="value">
					{{ item.recipient }}
				</view>
			</view>
			<view class="block-view-child-item">
				<view class="label">
					电话号码：
				</view>
				<view class="value">
					{{ item.recipientMobile }}
				</view>
			</view>
			<view class="block-view-child-item">
				<view class="label">
					收货地址：
				</view>
				<view class="value">
					{{ item.recipientAddress }}
				</view>
			</view>
			<view v-if="item.status === '2'" class="btn-view">
				<button class="btn" round :plain="true" size="mini" @click="addMark(item)">备注</button>
				<button class="btn warn-button" type="warn" round :plain="true" size="mini" @click="sureSend(item)">确认送达</button>
			</view>
			<view v-if="item.status === '1'" class="btn-view">
				<button class="btn warn-button" type="warn" round :plain="true" size="mini" @click="sureAcceptanceDelivery(item)">确认接受派送</button>
			</view>
			<view v-if="item.status === '3'">
				<span class="acceptanced-delivery">已送达</span>
			</view>
		</view>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message">
				<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
			</uni-popup>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="dialogType" cancelText="关闭" confirmText="同意" title="警告" :content="contentText"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
			<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="备注" :value="rootItem.mark" placeholder="请输入备注内容"
					@confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id: '1',
					number: 'SF21311910035-1',
					recipient: '洪本润-1',
					recipientMobile: '15678587895',
					recipientAddress: '福建省福州市长乐区外贸学院',
					receiptTime: '2024-11-16 12:00:00',
					status: '1', // 1: 待接收 ； 2：已发送； 3：已送达
					mark: '21311910035'
				}, {
					id: '2',
					number: 'SF21311910035-2',
					recipient: '李三峰',
					recipientMobile: '15678587845',
					recipientAddress: '福建省福州市长乐区外贸学院',
					receiptTime: '2024-11-16 12:00:00',
					status: '2',
					mark: '21311910035'
				}, {
					id: '3',
					number: 'SF21311910035-3',
					recipient: '张云亮',
					recipientMobile: '15678587824',
					recipientAddress: '福建省福州市长乐区外贸学院',
					receiptTime: '2024-11-16 12:00:00',
					status: '1',
					mark: '21311910035'
				}, {
					id: '4',
					number: 'SF21311910035-4',
					recipient: '黄晓东',
					recipientMobile: '15678587812',
					recipientAddress: '福建省福州市长乐区外贸学院',
					receiptTime: '2024-11-16 12:00:00',
					status: '3',
					mark: '21311910035'
				}],
				msgType: 'success',
				dialogType: '',
				messageText: '',
				contentText:'',
				rootItem:{}
			}
		},
		methods: {
			addMark(item) {
				this.rootItem = Object.assign({}, item)
				this.$refs.inputDialog.open()
			},
			dialogInputConfirm(val) {
				uni.showLoading()
				setTimeout(() => {
					uni.hideLoading()
					this.rootItem.mark = val
					// 关闭窗口后，恢复默认内容
					this.$refs.inputDialog.close()
					this.messageText = `添加备注成功！`
					this.list.splice(this.list.findIndex((row) => row.number === this.rootItem.number), 1, this
						.rootItem)
					this.$refs.message.open()
				}, 3000)
			},
			sureSend(item) {
				this.rootItem = Object.assign({}, item)
				this.contentText = `确认当前单号已送达吗？`
				this.dialogType = 'sureSend'
				this.$refs.alertDialog.open()				
			},
			sureAcceptanceDelivery(item) {
				this.rootItem = Object.assign({}, item)
				this.contentText = `确认接受派送当前单号吗？`
				this.dialogType = 'sureAcceptance'
				this.$refs.alertDialog.open()				
			},
			dialogConfirm() {
				this.messageText = `当前单号已送达！`
				this.rootItem.status = '3'
				if (this.dialogType === 'sureAcceptance') {
					this.messageText = `当前单号接受派送成功！`
					this.rootItem.status = '2'					
				}
				this.list.splice(this.list.findIndex((row) => row.number === this.rootItem.number), 1, this.rootItem)
				this.$refs.message.open()
			},
			dialogClose() {
				console.log('点击关闭')
			}
		}
	}
</script>

<style>
	.content {
		background-color: #f2f2f2;
		padding: 10px;
		height: calc(100vh - 95px);
		box-sizing: border-box;
		overflow: auto;
	}

	.block-view-child {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		margin-bottom: 10px;
		min-height: 140px;
		position: relative;
	}
	.block-view-child-item {
		display: flex;
		justify-content: space-between;
		padding: 2px;
	}
	.block-view-child-item .label {
		font-size: 14px;		
	}
	.block-view-child-item .value {
		font-size: 12px;
	}
	.btn-view {
		margin-top: 20px;
		display: flex;
		flex-direction: row;
	}

	.btn {
		font-size: 12px;
		border-radius: 20px;
	}
	.warn-button {
		border-color: #ffc517 !important;
		color: #ffc517 !important;
	}
	.acceptanced-delivery {
		position: absolute;
		top: 20px;
		right: 10px;
		display: inline-block;
		color: #21bf89;
		font-weight: bolder;
		font-weight: 18px;
		width: 60px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		border-radius: 50%;
		border: 2px solid #21bf89;
		transform: rotate(-30deg)
	}
</style>